<template>
	<view class="full-page" v-if="totalPage">

	</view>

	<view class="content" v-else>
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="我的发布" titleStyle="{'color': '#000'}">
			
		</u-navbar>

		<view class="topli">
			<view class="toptxt display-flex" :class="{'active': navIndex == 1}" @click="navTapType(1)">
				<block v-if="is_type == 0">已发布</block>
				<block v-if="is_type == 2">例文展示</block>
				<block v-if="is_type == 3">自己可见</block>
				<block v-if="is_type == 1">发布内容</block>
				<image :src="'/images/arrow-d.png' | formatImgUrl" mode="aspectFit"
					style="width: 9px;height: 7px;margin-left: 5rpx;"></image>
			</view>

			<view class="toptxt" :class="{'active': navIndex == 2}" @click="navTap(2)">
				已下架
			</view>
		</view>

		<view>
			<view class="empytView" v-if="!list.total">
				<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
				<!-- <view>- 空列表 -</view> -->
			</view>
			<view class="taibox" v-for="item in rowList">
				<image :src="'/images/bao.png' | formatImgUrl" @click="more(item)" class="baopic1" mode=""></image>
				<view @click="$go('/pages/find/content?type=1&id='+item.id)">
					<view class="taitop">
						<image :src="item.user.pic | formatImgUrl" class="taihead" mode=""></image>
						<view class="taiyou">
							<view class="yoa">
								<view class="nametxt">
									{{item.user.username}}
								</view>
								<image
									:src="$options.filters.formatImgUrl(item.user.writer_level.is_active?item.user.writer_level.level.image:item.user.writer_level.level.hide_img)"
									@click="$go('/pages/user/grade?uid='+item.user.membe_id)" class="jipic" mode=""
									v-if="item.user&&item.user.is_writer">
								</image>


								<image v-if="item.user&&item.user.user_level.is_active"
									:src="!item.user.user_level.level?'':($options.filters.formatImgUrl(item.user.user_level.active_day>0?item.user.user_level.level.image:item.user.user_level.level.hide_img))"
									class="biepic" mode="">

								</image>

							</view>
							<view class="baobox">
								<view class="baofen" v-if="item.hot">
									{{$db.get('config').diy_hot_label}}
								</view>
								<view class="baofen" v-if="item.sift">
									{{$db.get('config').diy_sift_label}}
								</view>
								<view class="baofen" v-if="item.is_hide"
									style="background: rgba(216, 216, 216, 0.3);color: #999;">
									自己可见
								</view>
								<view class="baofen" v-if="item.lw">
									例文展示
								</view>
								<view class="baofen2" v-if="item.is_top">
									置顶内容
								</view>
								<view class="baotime">
									{{item.times}}
								</view>
							</view>
						</view>
					</view>
					<view class="baotitle">
						{{item.title}}
					</view>
					<view class="baotxt">
						<rich-text :nodes="item.row | filterRichText"></rich-text>
					</view>

					<view class="chebox">
						<view class="chepic" v-for="items in item.img">
							<image :src="items | formatImgUrl" mode="aspectFill" class="chepic"></image>
						</view>
					</view>
					<view class="zanbox" v-if="item.status === 1">
						<view class="zanli">
							<image :src="'/images/heart1.png' | formatImgUrl" class="zanpic" mode="" style="width: 16px;height: 16px;"></image>
							<view class="zantxt">
								{{item.like_num}}
							</view>
						</view>
						<view class="zanli">
							<image :src="'/images/jg.png' | formatImgUrl" class="zanpic" mode=""></image>
							<view class="zantxt">
								{{item.remark_num}}
							</view>
						</view>
					</view>
					<view class="xiajia" v-if="item.status === 2">
						{{item.reason_msg?item.reason_msg:'自行下架'}}
					</view>
				</view>
			</view>
			<!-- <view class="nomore" v-if="rowList.length && list.current_page == list.last_page">
				没有更多了~
			</view> -->
		</view>


		<!-- 编辑弹框 -->
		<u-popup :show="show" @close="close" @open="open">
			<view class="mask">
				<view class="mabox">
					<view class="matop" @click.stop="is_tops(0)" v-if="is_hide==0 && navIndex == 1">
						<view class="matxt">
							<text v-if="is_top==0">置顶</text>
							<text v-if="is_top==1">取消置顶</text>
						</view>
						<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
					</view>
					<view class="matop" @click.stop="is_tops(1)" v-if="navIndex == 1 ">
						<view class="matxt">
							<text v-if="is_hide==0">设为隐私</text>
							<text v-if="is_hide==1">设为公开</text>
						</view>
						<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
					</view>
					<view class="matop" @click.stop="is_tops(2)" v-if="is_hide==0 &&navIndex == 1">
						<view class="matxt">
							<text v-if="lw==0">设为例文</text>
							<text v-if="lw==1">取消例文</text>
						</view>
						<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
					</view>

					<view class="matop" @click="goToedit()">
						<view class="matxt">
							编辑
						</view>
						<image :src="'/images/rarr.png' | formatImgUrl" class="mapic" mode=""></image>
					</view>
					<view class="matop" v-if="rowInfo.status == 1" @click="rowOperate(1)">
						<view class="matxt">
							下架
						</view>
						<image :src="'/images/rarr.png' | formatImgUrl" class="mapic" mode=""></image>
					</view>
					<view class="matop" @click="rowOperate(2)">
						<view class="matxt">
							删除
						</view>
						<image :src="'/images/rarr.png' | formatImgUrl" class="mapic" mode=""></image>
					</view>
				</view>

				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
		</u-popup>


		<u-popup :show="showFilter">
			<view class="mask">
				<view class="mabox">
					<view class="matop" v-for="(it,ix) in stateList" :key="ix" @tap="selectItem(ix)">
						<view class="matxt">
							{{it.name}}
						</view>
						<image :src="'/images/rarr.png' | formatImgUrl" class="mapic" mode=""></image>
					</view>
				</view>

				<view class="qubox" @click="showFilter = false">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 编辑弹框
				show: false,
				// 下架弹框
				xiashow: false,
				// 点击切换
				navList: [{
					id: 1,
					name: '已发布'
				}, {
					id: 2,
					name: '已下架'
				}],
				navIndex: 1,
				list: {},
				rowList: [],
				page: 1,
				rowInfo: {},

				showFilter: false,
				is_type: 0,
				stateList: [{
					id: 0,
					name: '已发布'
				}, {
					id: 3,
					name: '发布内容'
				}, {
					id: 1,
					name: '例文展示'
				}, {
					id: 2,
					name: '自己可见'
				}],

				is_top: 0,
				is_hide: 0,
				lw: 0,
				isClick: 0,
				totalPage: true
			}
		},
		onLoad() {

		},
		onShow() {
			this.getList()
		},

		// 上拉加载
		onReachBottom() {
			if (this.list.current_page < this.list.last_page) {
				this.page++; // 页数加一，加载下一页数据
				this.getList();
			}
		},
		methods: {
			// 动态设置操作
			is_tops(type) {
				this.$api.default.request('user/user_top', {
					id: this.aid,
					type: type
				}, 'POST').then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg, () => {
							this.page = 1
							this.getList()
							this.show = false
						})
					}
				})
			},
			selectItem(ix) {
				this.is_type = ix
				this.showFilter = false

				this.page = 1
				this.getList();
			},
			// 下架/删除
			rowOperate(statusType) {
				this.$api.default.request('discover/rowOperate', {
					id: this.rowInfo.id,
					type: statusType
				}).then((res) => {
					if (res.code) {
						this.show = false
						this.getList()
					}
				})
			},
			more(item) {
				this.show = true
				this.rowInfo = item

				this.aid = item.id,
					this.is_top = item.is_top,
					this.is_hide = item.is_hide
				this.lw = item.lw
				this.status = item.status
			},
			getList() {
				let is_type;
				if (this.is_type == 0) {
					is_type = 0
				} else if (this.is_type == 1) {
					is_type = 3
				} else if (this.is_type == 2) {
					is_type = 1
				} else if (this.is_type == 3) {
					is_type = 2
				}

				this.$api.default.request('discover/rowList', {
					type: this.navIndex,
					page: this.page,
					is_type: is_type
				}).then((res) => {
					if (res.code) {
						this.list = res.data
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								this.rowList.push(item)
							})
						} else {
							this.rowList = res.data.data
						}
					}

					this.totalPage = false
				})
			},
			// 点击切换
			navTap(id) {
				if (id == 1) {
					this.navIndex = id

					if (this.isClick < 1) {
						this.isClick++

					} else {
						this.isClick = 0
					}
					this.showFilter = true
					return
				}

				this.isClick = 0
				this.navIndex = id
				this.page = 1
				this.getList()
			},
			navTapType() {
				if (this.navIndex == 2) {
					this.navIndex = 1
					this.page = 1
					this.getList()
					return
				}
				this.showFilter = true

			},
			// 编辑弹框
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
			},
			// 下架弹框

			xiaclose() {
				this.xiashow = false
			},

			// 编辑
			goToedit() {
				this.show = false
				this.xiashow = false
				uni.navigateTo({
					url: '/pages/finance/fabu?item=' + encodeURIComponent(JSON.stringify(this.rowInfo))
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		.topli {
			background-color: #ffffff;
			height: 74rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;

			.toptxt {
				width: 50%;
				justify-content: center;
				text-align: center;
				font-size: 24rpx;
				color: #999999;
			}

			.active {
				font-weight: bold;
				color: #3d3d3d;
			}
		}

		.taibox {
			padding: 20rpx 30rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			position: relative;

			.baopic1 {
				width: 32rpx;
				height: 32rpx;
				top: 24rpx;
				right: 50rpx;
				position: absolute;
			}

			.baopic {
				width: 100rpx;
				height: 43rpx;
				top: 24rpx;
				right: 50rpx;
				position: absolute;
			}

			.baopic {
				width: 100rpx;
				height: 43rpx;
				top: 24rpx;
				right: 50rpx;
				position: absolute;
			}

			.taitop {
				display: flex;
				align-items: center;
				padding-bottom: 12rpx;

				.taihead {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.taiyou {
					padding: 0 12rpx;
					flex: 1;

					.yoa {
						display: flex;
						align-items: center;
						padding-bottom: 8rpx;

						.nametxt {
							font-size: 28rpx;
							color: #3D3D3D;
							padding-right: 8rpx;
							font-weight: bold;
						}

						.jipic {
							width: 41px;
							height:19px;
						}

						.biepic {
							width: 41px;
							height:19px;
							margin-left: 4px;
						}
					}

					.baobox {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.baofen {
							padding: 2rpx 8rpx;
							background: rgba(243, 122, 165, 0.15);
							border-radius: 4px;
							margin-right: 8rpx;
							flex-shrink: 0;
							font-size: 20rpx;
							letter-spacing: 0.08em;
							color: #F37AA5;
						}

						.baofen2 {
							padding: 2rpx 8rpx;
							background: rgba(69, 196, 176, 0.07);
							border-radius: 4px;
							margin-right: 8rpx;
							flex-shrink: 0;
							font-size: 20rpx;
							letter-spacing: 0.08em;
							color: #45C4B0;
						}

						.baotime {
							font-size: 24rpx;
							letter-spacing: 0em;
							color: #999999;
						}
					}
				}
			}

			.baotitle {
				font-size: 28rpx;
				color: #3D3D3D;
				padding-bottom: 6rpx;
			}

			.baotxt {
				font-size: 24rpx;
				color: #3D3D3D;
				line-height: 38rpx;
				padding-bottom: 20rpx;

			}

			.chebox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 20rpx;

				.chepic:last-child {
					margin-right: 0;
				}

				.chepic {
					width: 222rpx;
					height: 224rpx;
					margin-right: 12rpx;
				}
			}

			.zanbox {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				padding-top: 18rpx;
				border-top: 1px solid rgba(153, 153, 153, 0.1);

				.zanli {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.zanpic {
						width: 28rpx;
						height: 28rpx;
						flex-shrink: 0;
					}

					.zantxt {
						padding-left: 8rpx;
						font-size: 20rpx;
						letter-spacing: 0.08em;
						color: #999999;
					}
				}
			}

			.xiajia {
				border-top: 1px solid rgba(153, 153, 153, 0.1);
				padding-top: 12rpx;
				font-size: 24rpx;
				font-weight: 600;
				letter-spacing: 0em;
				color: #999999;
			}
		}

		.mask {
			background: #F2F5F2;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			overflow: hidden;

			.mabox {
				margin-bottom: 20rpx;

				.matop {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 40rpx 50rpx;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
					background-color: #ffffff;

					.mapic {
						width: 40rpx;
						height: 40rpx;
						flex-shrink: 0;
					}

					.matxt {
						flex-grow: 1;
						font-size: 28rpx;
						padding: 0 16rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
					}
				}
			}

			.qubox {
				line-height: 120rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				height: 120rpx;
				opacity: 1;
				background: #FFFFFF;
			}
		}
	}
</style>